<template>
  <div class="app-container">
    <el-button
      type="primary"
      icon="el-icon-circle-plus"
      round
      size="mini"
      class="add-btn"
      @click="handleAddRole"
      >添加角色</el-button
    >
    <!-- 添加角色弹出框 -->
    <el-dialog title="添加角色" :visible.sync="addRoleVisible" width="40%">
      <el-form ref="role" :model="role" label-width="120px">
        <el-form-item label="角色名称">
          <el-input v-model="role.roleName" />
        </el-form-item>
        <el-form-item label="角色关键字">
          <el-input v-model="role.roleKey" />
        </el-form-item>
        <!-- <el-form-item label="是否启用">
          <el-switch v-model="role.status" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="handleSubmitRole">提交</el-button>
          <el-button @click="handleCancelRole">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-table
      v-loading="listLoading"
      :data="allRoles.records"
      element-loading-text="加载中......"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="用户身份" prop="roleName" />
      <el-table-column label="用户标识" prop="roleKey" />
      <el-table-column label="状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag
            size="mini"
            effect="dark"
            :type="scope.row.status | statusFilter"
          >
            {{ scope.row.status === 1 ? "禁用" : "正常" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time" /> {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="showCurRoleResources(scope.row.id)"
            >资源
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-circle-plus-outline"
            @click="showAddResources(scope.row.id)"
            >赋权
          </el-link>
          <!-- <el-link
            type="primary"
            :underline="false"
            icon="el-icon-delete"
            @click="showDelRole(scope.row.id)"
            >删除
          </el-link> -->
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="showUpdateRole(scope.row.id)"
            >修改</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :hide-on-single-page="true"
      :current-page="allRoles.current"
      :page-size="allRoles.size"
      layout="total, prev, pager, next, jumper"
      :total="allRoles.total"
      @current-change="handleRolePageChange"
    />

    <!-- 修改角色弹出框 -->
    <el-dialog title="修改角色" :visible.sync="updateRoleVisible" width="40%">
      <el-form ref="role" :model="role" label-width="120px">
        <el-form-item label="角色名称">
          <el-input v-model="role.roleName" />
        </el-form-item>
        <el-form-item label="角色关键字">
          <el-input v-model="role.roleKey" />
        </el-form-item>
        <!-- <el-form-item label="是否启用">
          <el-switch v-model="role.status" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="handleUpdateRole">提交</el-button>
          <el-button @click="handleCancelUpdateRole">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 资源展示弹出框 -->
    <el-dialog title="资源列表" :visible.sync="resourcesVisible" width="60%">
      <el-table :data="resources" height="400px">
        <el-table-column property="remark" label="描述" width="300" />
        <el-table-column property="uri" label="URI" />
        <el-table-column property="method" label="请求方法" width="100" />
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleDelRoleResource(scope.row.id)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 角色赋权弹出框 -->
    <el-dialog
      title="给角色赋予资源"
      :visible.sync="addResourceVisible"
      width="60%"
    >
      <el-table :data="allResources.records">
        <el-table-column property="remark" label="描述" width="300" />
        <el-table-column property="uri" label="URI" />
        <el-table-column property="method" label="请求方法" width="100" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              :disabled="
                !!resources.find((ele) => {
                  return ele.id === scope.row.id;
                })
              "
              type="primary"
              plain
              size="mini"
              icon="el-icon-circle-plus-outline"
              @click="handleAddRoleResource(scope.row.id)"
              >添加
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :hide-on-single-page="true"
        :current-page="allResources.current"
        :page-size="allResources.size"
        layout="total, prev, pager, next, jumper"
        :total="allResources.total"
        @current-change="handleResourcePageChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  getRoleList,
  insertRole,
  delRoleById,
  getRoleById,
  updateRoleById,
  getResourceListByRoleId,
  getResourceList,
  insertRoleResource,
  delRoleResource,
} from "@/api/system";

export default {
  filters: {
    statusFilter(status) {
      const statusList = ["success", "info"];
      return statusList[status];
    },
  },
  data() {
    return {
      allRoles: { size: 10, current: 1, total: 0, records: [] },
      listLoading: true,
      resourcesVisible: false,
      addResourceVisible: false,
      addRoleVisible: false,
      updateRoleVisible: false,
      resources: [],
      allResources: { size: 5, current: 1, total: 0, records: [] },
      currentRoleId: null,
      role: {
        roleName: "",
        roleKey: "",
        status: true,
      },
    };
  },
  created() {
    this.fetchRoleList();
    this.fetchResourceList();
  },
  methods: {
    fetchRoleList() {
      this.listLoading = true;
      getRoleList({
        page: this.allRoles.current,
        limit: this.allRoles.size,
      }).then((response) => {
        this.allRoles = response.data;
        this.listLoading = false;
      });
    },
    fetchResourceList() {
      getResourceList({
        page: this.allResources.current,
        limit: this.allResources.size,
      }).then((response) => {
        this.allResources = response.data;
      });
    },
    fetchResourceListByCurrentRoleId() {
      getResourceListByRoleId(this.currentRoleId).then((res) => {
        this.resources = res.data;
      });
    },
    handleRolePageChange(page) {
      this.allRoles.current = page;
      this.fetchRoleList();
    },
    handleResourcePageChange(page) {
      this.allResources.current = page;
      this.fetchResourceList();
    },
    showCurRoleResources(roleId) {
      this.resourcesVisible = true;
      this.currentRoleId = roleId;
      this.fetchResourceListByCurrentRoleId();
    },
    showAddResources(roleId) {
      this.addResourceVisible = true;
      this.currentRoleId = roleId;
      this.fetchResourceListByCurrentRoleId();
    },
    handleAddRoleResource(resourceId) {
      insertRoleResource({
        resourceId: resourceId,
        roleId: this.currentRoleId,
      }).then((res) => {
        this.$notify.success({
          title: "提示",
          message: "角色赋权成功",
        });
        this.fetchResourceListByCurrentRoleId();
      });
    },
    handleDelRoleResource(resourceId) {
      delRoleResource({
        resourceId: resourceId,
        roleId: this.currentRoleId,
      }).then((res) => {
        this.$notify.success({
          title: "提示",
          message: "角色资源删除成功",
        });
        this.fetchResourceListByCurrentRoleId();
      });
    },
    handleAddRole() {
      this.addRoleVisible = true;
      this.role = {
        roleName: "",
        roleKey: "",
        status: true,
      };
    },
    handleSubmitRole() {
      if (this.role.roleKey === "" || this.role.roleName === "") {
        this.$message.warning({
          message: "请填写完整参数",
          showClose: true,
        });
        return;
      }
      let formData = Object.assign({}, this.role);
      formData.status = this.role.status ? 0 : 1;
      insertRole(formData).then((res) => {
        this.$notify.success({
          title: "提示",
          message: res.message,
        });
        this.handleCancelRole();
        this.fetchRoleList();
      });
    },
    handleCancelRole() {
      this.role = {
        roleName: "",
        roleKey: "",
        status: true,
      };
      this.addRoleVisible = false;
    },
    showDelRole(roleId) {
      this.$confirm("确认删除该角色？删除之后不可恢复")
        .then((val) => {
          delRoleById(roleId).then((_) => {
            this.$notify.success({
              title: "提示",
              message: "角色删除成功",
            });
            this.fetchRoleList();
          });
        })
        .catch((_) => {});
    },
    showUpdateRole(roleId) {
      this.updateRoleVisible = true;
      this.currentRoleId = roleId;
      getRoleById(roleId).then((res) => {
        res.data.status = res.data.status === 0;
        this.role = res.data;
      });
    },
    handleUpdateRole() {
      let formData = Object.assign({}, this.role);
      formData.status = this.role.status ? 0 : 1;
      updateRoleById(formData).then((res) => {
        this.$notify.success({
          title: "提示",
          message: "角色修改成功",
        });
        this.fetchRoleList();
        // 重置状态
        this.handleCancelUpdateRole();
      });
    },
    handleCancelUpdateRole() {
      this.role = {
        roleName: "",
        roleKey: "",
        status: true,
      };
      this.updateRoleVisible = false;
    },
  },
};
</script>

<style scoped>
.add-btn {
  margin-bottom: 10px;
}
.el-link {
  font-size: 12px;
  margin-left: 4px;
}
.el-link:hover {
  font-weight: bold;
}
</style>
